<style lang="scss">
  @import '@/assets/css/variable';
  .merchant{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: $main-bgc;
    min-height: 100%;
    font-size: 1.2rem;
    overflow: auto;
    box-sizing: border-box;
    .door-header-box{
      width: 100%;
      height: 20rem;
      position: relative;
      overflow: hidden;
      img{
        width: 100%;
        max-height: 20rem;
        object-fit: cover;
      }
      .change-pic{
        position: absolute;
        width: 10rem;
        height: 2.8rem;
        right: 0rem;
        bottom: 0.1rem;
        border-top-left-radius: 0.6rem;
        // border-bottom-right-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #000000, $alpha: 0.7);
        color: white;
        font-size: 1.2rem;
      }
    }
  }
</style>
<template>
  <div class="merchant">

    <input
      type="file"
      class="file-input d-none"
      ref="fileInput"
      @change="handleFileChange"
    >
    <div class="door-header-box">
      <img :src="form.door_header" alt="">
      <span class="change-pic" @click="uploadBtn">添加/更换门头照</span>
    </div>
    <!-- <van-empty>
      <van-button round :color="$store.getters.getMasterColor" class="bottom-button" @click="uploadBtn">点击上传门头照</van-button>
    </van-empty> -->
    <van-cell-group>
      <van-field v-model="form.name" label="商户名称" maxlength="12" placeholder="请输入商户名称" />
      <van-field
        readonly
        clickable
        name="area"
        :value="form.pca"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field v-model="form.detail_address" label="详细地址" maxlength="20" placeholder="请输入门店的详细地址" />
      <van-field v-model="form.mobile" maxlength="11" label="联系方式" placeholder="请输入联系方式" />
    </van-cell-group>
    <div class="margT-l padding-lr">
      <van-button :color="$store.getters.getMasterColor" size="large" block @click="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
import { Button, Empty, Form, Field, CellGroup, Popup, Area, Loading, Toast, Dialog } from 'vant';
import { Image as VanImage } from 'vant';
import { areaList } from '@vant/area-data';
import utils from '@/assets/js/utils.js';
export default {
  name: "Merchant",
  components: {
    [Empty.name]: Empty,
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Loading.name]: Loading,
    [Dialog.name]: Dialog,
    VanImage
  },
  data() {
    return {
      openid: "",
      showArea: false,
      areaList,
      data: '',
      form: {
        name: "",
        door_header: "",
        pca: "",
        province: "",
        city: "",
        area: "",
        detail_address: "",
        mobile: ""
      }
    }
  },
  mounted () {
    this.openid = this.$store.state.openid;
    // this.form.door_header = "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f025bed1-101b-4383-9c33-bbbeccec7177/5fc47e7a-e89a-470f-843c-902210a43215.jpg";
    if (process.env.NODE_ENV == 'production') { //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到"
    }else{
      this.openid = this.$store.state.openid
    }
    this.getMerchantItem();
  },
  methods: {
    handleFileChange(e) {
      const img = e.target.files[0];
      console.log('img', img)
      if (img.type != 'image/jpeg' && img.type != 'image/png') {
        Toast('请上传jpg或png格式的图片');
        return false;
      }
      if(img.size > 1000 * 1024) {
        Toast("图片大小请不要超过1M")
        return
      }
      utils.blobToDataURL(img, (base64Url) => {
        this.form.door_header = base64Url
        this.inputImg = base64Url;
        let formData = new FormData()
        formData.append('file', img)
        console.log("formData", formData)
        this.$request.uploadPic(formData).then(res=>{
          console.log("res", res)
          this.form.door_header = res.data.url;
        })
      });
      
    },
    uploadBtn() {
      this.$refs.fileInput.click()
    },
    submit() {
      let params = {
        openid: this.openid,
        name: this.form.name,
        province: this.form.province,
        city: this.form.city,
        area: this.form.area,
        mobile: this.form.mobile,
        detail_address: this.form.detail_address,
        door_header: this.form.door_header
      }
      if(this.data == false) {
        
      }else{
        params.id = this.form.id
      }
      // params.openid = this.openid;
      if(!params.openid){
        Toast('需重新获取微信信息')
        return
      }
      this.$request.saveMerchant(params).then(res=>{
        if(res.ret == 200) {
          Toast("保存成功")
          this.$router.replace('my');
        }
      })
    },
    getMerchantItem() {
      const toast = Toast.loading({
        forbidClick: true,
        message: '加载中...',
      });
      let params = {
        openid: this.openid
      }
      this.$request.getMerchantItem(params).then(res=>{
        if(res.data.id){
          this.form = res.data
          this.form.pca = `${this.form.province},${this.form.city},${this.form.area}`
          this.data = res.data
        }else{
          this.data = false
        }
        toast.clear()
      })
    },
    onConfirm(values) {
      console.log("values", values)
      this.form.province = values[0].name
      this.form.city = values[1].name
      this.form.area = values[2].name
      this.form.pca = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join(',');
      this.showArea = false;
    },
  }
};
</script>
